<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Outline-Width - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">outline-width</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b> 
    [<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O7</i></b>|<b class="s">S1.2</b>]<br></td>
    <td align=center><b class="alert">Other Outline Properties</b><br></td>
</tr>
<tr>
    <td align=center><a href="outline.htm">outline</a><br>
    <a href="outcolor.htm">outline-color</a><br>
    <a href="outstyle.htm">outline-style</a><br></td>
</tr>
<tr><td align=center colspan=2>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">medium</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>ALL</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual, Interactive</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA</td></tr>
<tr><th align=left><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines">CSS2: Sect 18.4</a>,
        <a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">CSS2.1: Sect 18.4</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>The 'outline-width' property specifies the width for the outline of an element.
        <br><br>

        The outline properties create a uniform line around an object in order
        to draw visual attention. An outline is slightly different than a border
        in several ways: An outline is drawn starting "just outside the border
        edge" and is allowed to be non-rectangular. Outlines are always rendered
        on <em>TOP</em> of an element's rendering box and do not influence the
        box's position or size calculation; the document does not need to be
        re-flowed when a border is rendered or hidden, but the outline may
        overlap other nearby elements.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O7</i></b>|<b class="s">S1.2</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">thin</b> | <b class="subheading">medium</b> |
    <b class="subheading">thick</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O7</i></b>|<b class="s">S1.2</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        Renders a &quot;thin&quot;, &quot;medium&quot; or &quot;thick&quot; outline
        border for the element's rendering box. The actual thickness of
        these outline values is not specified, but &quot;thin&quot; should have a
        smaller thickness than &quot;medium&quot;, which should have a smaller
        thickness than &quot;thick&quot;.</dd>

<dt><b class="subheading">[length]</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O7</i></b>|<b class="s">S1.2</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Sets the width of the outline around the current element rendering box to
        an explicit measurement.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">input</b> {
        <span class="property">outline-width:</span> thin }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">input</b>
        <span class="tagattrib">TYPE</span>=&quot;text&quot;
        <span class="tagattrib">NAME</span>=&quot;text1&quot;<br>
        <span class="tagattrib">VALUE</span>=&quot;Default Text&quot;
        <span class="tagattrib">STYLE</span>=&quot;<span class="property">outline-width:</span>
        thin&quot;&gt;</div>
</dl>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li>Nothing to report.
</ul>



<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>


</BODY>
</HTML>